import { defineComponent, defineDirective } from "@/shared/tools.mjs";

export class DropdownCtrl {
  static $inject = ["$scope", "$log"];

  /**
   * @param {ng.IScope} $scope
   * @param {ng.ILogService} $log
   */
  constructor($scope, $log) {
    this.$scope = $scope;
    this.$log = $log;
    this.items = [
      "The first choice!",
      "And another choice for you.",
      "but wait! A third!",
    ];

    /**
     * @type {{isOpen: boolean}}
     */
    this.status = {
      isOpen: false,
    };
    this.appendToEl = (() => {
      const el = document.querySelector("#dropdown-long-content");
      return el ? $(el) : null;
    })();
  }

  /**
   * @param {boolean} open
   */
  toggled(open) {
    this.$log.log("Dropdown is now: ", open);
  }

  handleClick() {
    this.$log.info("this", this);
  }

  /**
   * @param {Event} e
   */
  toggleDropdown(e) {
    this.$log.info("$event: ", e);
    e.preventDefault();
    e.stopPropagation();
    this.status.isOpen = !this.status.isOpen;
  }
}
export const DropdownComponent = defineComponent({
  controller: class {
    /**
     * @param {ng.ITemplateRequestService} $templateRequest
     * @param {ng.ISCEService} $sce
     */
    constructor($templateRequest, $sce) {
      this.$templateRequest = $templateRequest;
      this.$sce = $sce;
      // $templateRequest("dropdown.html").then((html) => {
      //   this.template = html;
      // });
    }
  },
  template: /* HTML */ html`
    <ul class="dropdown-menu" uib-dropdown-menu role="menu">
      <li role="menuitem">
        <a href="javascript:void(0);">Action in Template</a>
      </li>
      <li role="menuitem">
        <a href="javascript:void(0);">Another action in Template</a>
      </li>
      <li role="menuitem">
        <a href="javascript:void(0);">Something else here</a>
      </li>
      <li class="divider"></li>
      <li role="menuitem">
        <a href="javascript:void(0);">Separated link in Template</a>
      </li>
    </ul>
  `,
});

export const DropdownDirective = defineDirective(() => ({
  restrict: "A",
  template: html`
    <li role="menuitem">
      <a href="javascript:void(0);">Action in Template</a>
    </li>
    <li role="menuitem">
      <a href="javascript:void(0);">Another action in Template</a>
    </li>
    <li role="menuitem">
      <a href="javascript:void(0);">Something else here</a>
    </li>
    <li class="divider"></li>
    <li role="menuitem">
      <a href="javascript:void(0);">Separated link in Template</a>
    </li>
  `,
}));
